<script setup lang="ts">
import { EditOutlined } from '@vicons/antd'
import { NButton, NDivider, NDrawer, NDrawerContent, NIcon, NInput, NInputNumber, NModal, NRadio, NRadioGroup, NSelect, NSpace, NTag, NText } from 'naive-ui'
import { ref } from 'vue'
import type { DesignFlowNode } from '../../../model'
import { approvalTypeList } from '../../../model'

import { useFlowStore } from '../../../flowStore'
import OrgSelector from '../../../org-selector/index.vue'
import ParameterTable from '../../../paramter-table/index.vue'
import RoleSelector from '../../../role-selector/index.vue'
import UserSelector from '../../../user-selector/index.vue'

const flowStore = useFlowStore()

const userSelectVisiable = ref<boolean>(false)
const roleSelectVisiable = ref<boolean>(false)
const orgSelectVisiable = ref<boolean>(false)

function closeNode(node: DesignFlowNode) {
    node.isNameEdit = false
    node.isEdit = false
}

function changeApprovalType(node: DesignFlowNode) {
    if (node.config.approvalList) {
        node.config.approvalList.length = 0
    }
    if (node.config.approvalUserList) {
        node.config.approvalUserList.length = 0
    }
    if (node.config.approvalRoleList) {
        node.config.approvalRoleList.length = 0
    }
    if (node.config.approvalOrgList) {
        node.config.approvalOrgList.length = 0
    }
}
</script>

<template>
    <div v-for="node in flowStore.flowNodeList" :key="node.nodeId">
        <n-drawer v-if="['0', '1', '3', '5', '6', '9'].includes(node.nodeType)" :show="node.isEdit"
            @update-show="closeNode(node)" show-mask="transparent" :width="500" placement="right">
            <n-drawer-content :title="node.nodeName" closable>
                <template #header>
                    <n-space v-if="!node.isNameEdit" align="center">
                        <n-text>{{ node.nodeName }}</n-text>
                        <n-icon style="cursor: pointer;" @click="node.isNameEdit = true">
                            <edit-outlined />
                        </n-icon>
                    </n-space>

                    <n-space v-if="node.isNameEdit" align="center">
                        <n-input v-model:value="node.nodeName" style="width:200px" type="text" placeholder="请输入节点名称"
                            clearable />
                        <n-button @click="node.isNameEdit = false" type="primary">确定</n-button>
                    </n-space>
                </template>
                <div v-if="node.nodeType === '1'">
                    <n-space vertical>
                        <n-divider style="margin-top:0" title-placement="left">审批人设置</n-divider>
                        <n-radio-group name="radiogroup" v-model:value="node.config.approvalType"
                            @update:value="changeApprovalType(node)">
                            <n-space>
                                <n-radio v-for="approval in approvalTypeList" :value="approval.value">
                                    {{ approval.label }}
                                </n-radio>
                            </n-space>
                        </n-radio-group>
                        <div>
                            <n-modal v-model:show="userSelectVisiable">
                                <user-selector :value="node.config.approvalList"
                                    @update:value="(value: string[]) => flowStore.approvalListUpdate(node.nodeId, value)"
                                    @cancel="userSelectVisiable = false" />
                            </n-modal>
                            <n-modal v-model:show="roleSelectVisiable">
                                <role-selector :value="node.config.approvalList"
                                    @update:value="(value: string[]) => flowStore.approvalListUpdate(node.nodeId, value)"
                                    @cancel="roleSelectVisiable = false" />
                            </n-modal>
                            <n-modal v-model:show="orgSelectVisiable">
                                <org-selector :value="node.config.approvalList"
                                    @update:value="(value: string[]) => flowStore.approvalListUpdate(node.nodeId, value)"
                                    @cancel="orgSelectVisiable = false" />
                            </n-modal>
                        </div>
                        <div>
                            <n-button v-if="node.config.approvalType === '0'" type="primary" size="small"
                                @click="userSelectVisiable = true">选择人员</n-button>
                            <n-button v-if="node.config.approvalType === '1'" type="primary" size="small"
                                @click="roleSelectVisiable = true">选择角色</n-button>
                            <n-button v-if="node.config.approvalType === '2'" type="primary" size="small"
                                @click="orgSelectVisiable = true">选择部门</n-button>
                        </div>
                        <div>
                            <div v-if="['0', '1', '2'].includes(node.config.approvalType as string)">
                                <n-space v-if="node.config.approvalType === '0'">
                                    <n-tag v-for="user in node.config.approvalUserList" :key="user.userId">
                                        {{ user.userName }}
                                    </n-tag>
                                </n-space>
                                <n-space v-if="node.config.approvalType === '1'">
                                    <n-tag v-for="role in node.config.approvalRoleList" :key="role.roleCode">
                                        {{ role.roleName }}
                                    </n-tag>
                                </n-space>
                                <n-space v-if="node.config.approvalType === '2'">
                                    <n-tag v-for="org in node.config.approvalOrgList" :key="org.orgCode">
                                        {{ org.orgName }}
                                    </n-tag>
                                </n-space>
                            </div>
                            <div v-if="node.config.approvalType === '3'">
                                <n-space vertical>
                                    <n-text>审批终点</n-text>
                                    <n-space vertical>
                                        <n-radio :checked="node.config.approvalEnd === -1"
                                            @change="node.config.approvalEnd = -1">直至最上层领导</n-radio>
                                        <n-space>
                                            <n-radio :checked="node.config.approvalEnd !== -1"
                                                @change="node.config.approvalEnd = 1">不超过发起人的第</n-radio>
                                            <n-input-number v-model:value="node.config.approvalEnd"
                                                :disabled="node.config.approvalEnd === -1" style="width:150px" :min="1"
                                                :max="100" />
                                            <span>级领导</span>
                                        </n-space>
                                    </n-space>
                                </n-space>
                            </div>
                        </div>
                        <n-divider title-placement="left">多人审批方式</n-divider>
                        <n-radio-group name="radiogroup" v-model:value="node.config.multiApprovalType">
                            <n-space vertical>
                                <n-radio value="0">或签(有一人同意，审批通过)</n-radio>
                                <n-radio value="1">会签(所有人同意，审批通过)</n-radio>
                            </n-space>
                        </n-radio-group>

                        <n-divider title-placement="left">审批拒绝时</n-divider>
                        <n-radio-group name="radiogroup" v-model:value="node.config.approvalRefusedType">
                            <n-space vertical>
                                <n-radio value="0">直接结束流程</n-radio>
                                <n-radio value="1">驳回至上级节点</n-radio>
                                <n-space>
                                    <n-radio value="2">驳回至指定节点</n-radio>
                                    <n-select v-model:value="node.config.approvalRefusedToNodeId"
                                        :disabled="node.config.approvalRefusedType !== '2'" style="width:220px;"
                                        :options="flowStore.approvalNodeList" label-field="nodeName" value-field="nodeId" />
                                </n-space>
                            </n-space>
                        </n-radio-group>
                    </n-space>
                </div>
                <div v-if="node.nodeType === '3'">
                    <n-space vertical>
                        <n-divider style="margin-top:0" title-placement="left">条件设置</n-divider>
                        条件表达式<n-input v-model:value="node.config.conditionExpression" placeholder="请输入条件表达式" />
                        <n-divider title-placement="left">参数列表</n-divider>
                        <parameter-table />
                    </n-space>
                </div>
                <div v-if="node.nodeType === '6'">
                    <n-space vertical>
                        <n-divider style="margin-top:0" title-placement="left">触发对象设置</n-divider>
                        触发对象
                        <n-select v-model:value="node.config.triggerTarget" :options="flowStore.triggerList"
                            value-field="springBeanName" placeholder="请选择触发器" />
                        <n-divider title-placement="left">参数列表</n-divider>
                        <parameter-table />
                    </n-space>
                </div>
            </n-drawer-content>
        </n-drawer>
    </div>
</template>

<style scoped></style>